<template>
  <el-card class="box-card">
    <template #header>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-button size="small" type="primary" @click="isShowDialog=true">添加页面</el-button>
        </el-col>
        <el-row type="flex" justify="end">
          <el-col>
            <el-input v-model="title_contains" placeholder="请输入内容" class="input-with-select" />
          </el-col>
          <el-col :span="4">
            <el-button class="btn1" @click="search">筛选</el-button>
          </el-col>
        </el-row>
      </el-row>

    </template>
    <!-- <div slot="header" class="clearfix">
      <div class="bt1">
      </div>
      <div>

        <div style="margin-top: 15px;" class="in1">
          </el-input>
        </div>

      </div>
     </div> -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容">
        <template v-slot="{row}">
          <span v-html="row.content" />
        </template>
      </el-table-column>
      <el-table-column #default="{row}" label="操作">
        <el-button type="primary" @click="editPage(row.id)">编辑页面</el-button>
        <el-button type="danger" @click="delPage(row.id)">删除</el-button>
      </el-table-column>
    </el-table>
    <hr>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="pageTotal"
        :page-size="pageData._limit"
        @current-change="currentChange"
      />
    </div>
    <AddPage :id="id" ref="addForm" :is-show-dialog="isShowDialog" @reload="getList" @closeDialog="isShowDialog=false" />
  </el-card>
</template>

<script>

import AddPage from './components/add-page.vue'
import { getPageList, delPage, getPageDetail, getPageCount } from '@/api/page'
export default {
  components: {
    AddPage

  },
  data() {
    return {
      list: [],
      input3: '',
      title_contains: '',
      pageData: {
        _limit: 2,
        _start: 0
      },
      pageTotal: 0,
      formData: [{
        title: '关于我们还好',
        content: 'balabala'
      }],
      isShowDialog: false,
      id: 0
    }
  },
  created() {
    this.getList()
    this.getCount()
  },
  methods: {
    async getList() {
    //   const { total, rows } = await getPageList(this.list)
    //   this.page.total = total
    //   this.list = rows
    //    const res = await getPageList({ title_contains: this.title_contains })
    //   console.log('hhh')
      const res = await getPageList(this.pageData)
      // this.list = res
      console.log(res.data)
      // 调用获取总条数
      // const amount = await getPageCount()
      // console.log(amount.data)
      // this.pageTotal = amount.data
      this.list = res.data
      this.getCount()
    },
    async getCount() {
      const res = await getPageCount()
      this.pageTotal = res.data
      console.log(res.data)
    //   this.pageTotal = await getPageCount()
    //   const res = await getPageCount()
    //   console.log(res)
    },
    async editPage(id) {
      this.id = id
      this.isShowDialog = true
      const res = await getPageDetail(id)
      this.$refs.addForm.formData = res.data
    },
    async delPage(id) {
      await delPage(id)
      if (this.pageData._start !== 0 && this.list.length === 1) {
        this.pageData._start = this.pageData._start - this.pageData._limit
      }
      // this.formData = res.data，
      this.getList()
    },
    async search() {
      const res = await getPageList({ title_contains: this.title_contains })
      //   this
      console.log(res)
      this.getList()
    },
    async currentChange(page) {
    //   const lastPage = await getPageList(this.pageData._limit)
    //   const page1 = lastPage * this.pageData._limit - 1
    //   this._limit = page1
      this.pageData._start = (page - 1) * this.pageData._limit
      console.log(this.pageData._start, '起始位置')

      //   this.pageConfig.page = page
      this.getList()
    }

  }
}
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .clearfix{
  display: flex;
    align-content:space-between;
    width: 1200px;
  }
  .block{
    text-align: center;
  }

  .btn1{
    margin-right: 10px;
  }
</style>
